<template>
  <div>
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 行为日志</span>
      </template>
    </el-page-header>
  </div>
  <div >
  <el-skeleton :rows="11" :loading="loading" animated>
    <div class="grid-content bg-purple-dark" id="k1">
    <el-row gutter="40">
      <el-col :span="12">
        <div style="margin-left: 10px;">
          <el-date-picker v-model="time" @change="change" type="datetimerange" :shortcuts="shortcuts" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
      </el-col>
      <el-col :span="12" >
        <div style="margin-left: 10px;">

          <el-input v-model="input" placeholder="输入关键词查询" @input="handlerChange" class="input-with-select">
            <template #prepend>
              <el-select style="" v-model="select" @input="selected" placeholder="请选择">
                        <el-option label="全部" value="全部" />
                        <el-option :key="i" v-for="(item, i) in selects" :label="item"
                            :value="item" />
                    </el-select>
            </template>
            <template #append>
              <el-button circle>
                <el-icon>
                  <Search />
                </el-icon>
              </el-button>
            </template>
          </el-input>
        </div>
      </el-col>



    </el-row>
  </div>
    <div style="width: 100%;height: 100%;margin-top: 10px;">
      <el-table :data="tableData" row-key="id" v-loading="loadingshow" border stripe style="width: 100%;height: 460px;">
        <el-table-column prop="id" v-if="false" label="编号" width="180" />
        <el-table-column type="index" label="序号" align="center" width="80" />
        <el-table-column prop="author" label="操作人" width="180" />
        <el-table-column prop="version" label="平台" />
        <el-table-column prop="group" label="行为类型" width="180" />
        <el-table-column prop="action" label="行为" />
        <el-table-column prop="result" label="结果" width="80">
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.result === 0">成功</el-tag>
            <el-tag type="danger" v-else>失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ip" label="ip" />
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column fixed="right" label="操作" width="120">
      <template #default>
        <el-button  type="primary" size="small"
          >详情</el-button
        >
      </template>
    </el-table-column>
      </el-table>
      <div id="k2">
        <el-pagination v-model:current-page="currentpage" v-model:page-size="limit" :page-sizes="[10, 20, 30, 40]"
          layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </el-skeleton>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { getactionlogs } from '../../../api/log/index'
import {getActionTypes} from '../../../api/log/index'
 

// import { getactionlogs } from '../../../api/log/index.ts'
export default defineComponent({
  setup() {
    const data = reactive({
      tableData: [],//表格数据
      page: 1,//页数
      limit: 10,//每页数量
      total: 0,//总条数
      currentpage: 1,//当前页
      loading: true,//骨架屏
      loadingshow: false,//表格加载
      time:'',//时间
      input:'',//输入框
      select:'',//下拉框
      search:"",//搜索的值
      type:'',//行为类型
      begin:'',//开始时间
      end:'',//结束时间
      key:'',
      selects:[],//下拉框数据
    })

    onMounted(() => {
      events.getdata(data.begin,data.type,data.end,data.key);
      events.getActionTypes();
    })

    const events = {
      //数据显示
      getdata(key: any, type: any, begin: any, end: any) {
        getactionlogs({
          page: data.page,
          limit: data.limit,
          type:type,
          begin:begin,
          end:end,
          key:key
        }).then((res: any) => {
          if (res.result == 0) {
            console.log(res)
            data.tableData = res.data.data
            data.total = res.data.total
            data.loading = false
            data.loadingshow = false
          }
        })

      },
      // 分页
      handleSizeChange(val: any) {
        data.limit = val
        events.getdata(data.begin,data.type,data.end,data.key);
        data.loadingshow = true;
      },
      handleCurrentChange(val: any) {
        data.page = val
        events.getdata(data.begin,data.type,data.end,data.key);
        data.loadingshow = true;
      },
      //查询
      handlerChange(e:any){
        data.loadingshow = true;
            data.key = e;
            events.getdata(data.key, data.type, data.begin, data.end);
            if (!e) {
                data.key = "";
                events.getdata(data.key, data.type, data.begin, data.end);
            }
      },
      //选中下拉框
      selected(e:any){
        data.loadingshow = true;
            events.getdata(data.key, data.type = e, data.begin, data.end);
            console.log(1111)
      },
      //时间选择
      change(e:any){
        data.loadingshow=true
        if (data.time != null) {
                //开始时间
                var Kymd = events.dateFormat(data.time[0]) //年月日
                //结束时间
                var Jymd = events.dateFormat(data.time[1]) //年月日
                console.log("开始时间", Kymd)
                console.log("结束时间", Jymd)
                events.getdata(data.key, data.type,Kymd,Jymd);
            } else {
                events.getdata(data.key, data.type, data.begin = '', data.end = '');
            }
      },
      //时间转换，时间转换 Wed Sep 16 2020 00:00:00 GMT+0800 (中国标准时间)
      dateFormat(tableDate:any) {
            var date = new Date(tableDate)
            var y = date.getFullYear()
            var m:any = date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            var d:any = date.getDate()
            d = d < 10 ? ('0' + d) : d
            const time = y + '-' + m + '-' + d
            return time
        },
      // 获取日志类型
      getActionTypes() {
            getActionTypes({}).then((res:any)=> {
                if (res.result === 0) {
                    data.selects= res.data
                    console.log(res)
                }
            })
        }
    }

    return {
      ...toRefs(data),
      ...events
    }
  }
})
</script>
<style scoped>
#fy {
  text-align: center;
  margin-top: 10px;
}
#k1{
  height: 50px;
  border: 1px paleturquoise solid;
  border-radius: 5px;
  display: flex;
  text-align: center;
  align-items: center;
}
#k2{
  margin-top: 10px;
  height: 50px;
  border: 1px paleturquoise solid;
  border-radius: 5px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
}
</style>

